<template>
    <a-card title="会员车辆" :bordered="false">

        <!-- 搜索 -->
        <template slot="extra">

            <a-form-model layout="inline" @submit.prevent="searchSubmit">
                <a-form-model-item>
                    <a-select placeholder="车辆类型" allowClear
                              showSearch :filter-option="$exMod.cxOption"
                              v-model="searchForm.typeCode" style="width: 150px">
                        <a-select-option v-for="(item, index) in VehicleTypeOPT" :key="index" :value="item.value">
                            {{item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>


                <a-form-model-item>
                    <a-select placeholder="黑名单" allowClear
                              showSearch :filter-option="$exMod.cxOption"
                              v-model="searchForm.inBlacklist" style="width: 150px">
                        <a-select-option value="T">是</a-select-option>
                        <a-select-option value="F">否</a-select-option>
                    </a-select>
                </a-form-model-item>

                <a-form-model-item>
                    <a-input v-model="searchForm.plateNo"
                             :allowClear="$store.getters.allowClear"
                             placeholder="车牌号"></a-input>
                </a-form-model-item>


                <a-form-model-item>
                    <a-input v-model="searchForm.name"
                             :allowClear="$store.getters.allowClear"
                             placeholder="车主昵称"></a-input>
                </a-form-model-item>


                <a-form-model-item>
                    <a-input v-model="searchForm.phone"
                             :allowClear="$store.getters.allowClear"
                             placeholder="车主手机"></a-input>
                </a-form-model-item>


                <a-form-model-item>
                    <a-button type="primary" html-type="submit">搜索</a-button>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="searchRest">重置</a-button>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="danger" @click="openEdit()">添加车辆</a-button>
                </a-form-model-item>
            </a-form-model>
        </template>


        <div class="mainBox">


            <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 4, xxl:6 }"
                    :loading="loading"
                    :pagination="pagination" :data-source="dataSource">
                <a-list-item slot="renderItem" slot-scope="item, index">
                    <a-card :hoverable="true" :title="false" :bodyStyle="{padding:'12px',height:'120px'}">


                        <div slot="cover" class="cover">
                            <img width="100%" :src="item.picture"/>
                        </div>
                        <div class="vehicleBox">
                            <span class="plateNo">{{item.plateNo}}</span>
                            <small class="type">{{item.typeName}}</small>
                            <span class="schedule" :title="item.authStatus==='T'?'已认证车辆':'未认证车辆'"> <a-icon
                                    type="schedule"
                                    :class="item.authStatus==='T'?'text-pink':'text-aux' "/></span>
                            <span class="isFree" v-if="item.isFree==='T'">
                                <a-icon type="transaction" title="免费车辆"/></span>
                            <span class="hmd" v-if="item.inBlacklist==='T'">

                                <a-icon type="alert" title="黑名单车辆" theme="filled"/>

                               </span>
                        </div>

                        <a-card-meta :title="item.name" v-if="item.vipId">
                            <a-avatar slot="avatar" size="large" :src="item.headImgUrl"/>
                            <template slot="description">{{item.phone}}


                                <span class="platformTag text-success" title="微信公众号用户">  <a-icon type="wechat"/> </span>
                                <span class="platformTag text-blue" title="微信小程序用户"> <a-icon type="wechat"/> </span>

                            </template>


                        </a-card-meta>

                        <div v-else class="noVipInfo ">暂无会员绑定信息</div>

                        <template slot="actions" class="ant-card-actions">
                            <a v-if="item.authStatus==='T'"
                               @click="openLicenseModal(item)"
                            >行驶证</a>
                            <a @click="openEdit(item)">编辑</a>


                            <a @click="unbind(item)">解绑</a>
                        </template>
                    </a-card>
                </a-list-item>
            </a-list>
        </div>
        <EditBox v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord"/>


        <LicenseModal v-if="LicenseModalShow" @closeFun="closeLicenseModal" :record="LicenseModalRecord"/>

    </a-card>
</template>


<script>


    import {pagination} from '../public/colums.js';
    import {vehicleList, vehicleUnbind} from '../public/http.js';
    import {VehicleTypeDict} from '../public/internal.js';

    export default {

        components: {
            EditBox: () => import('./edit.vue'),
            LicenseModal: () => import('./license_modal')
        },


        data() {
            return {
                showSrc: '',
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录

                LicenseModalShow: false,
                LicenseModalRecord: {},


                dataSource: [],
                pagination: {

                    ...pagination,
                    pageSize: 12,
                    onChange: current => {
                        this.pagination.current = current;
                        this.getTableList();
                    }
                },
                loading: false, //表格loading

                searchForm: {},

                VehicleTypeOPT: [],

            };
        },
        methods: {


            openLicenseModal(obj = {}) {
                this.LicenseModalRecord = obj;
                this.LicenseModalShow = true;

            },

            closeLicenseModal() {

                this.LicenseModalRecord = {};
                this.LicenseModalShow = false;
            },

            unbind(record) {
                const _this = this;
                if (record.vipId) {

                    this.$confirm({
                        title: record.plateNo + '解绑确认',
                        width: 500,
                        content: '解绑之后 【' + record.name + '】将无法收到车辆相关的动态信息 确定要解绑吗',
                        okText: '确认解绑',
                        cancelText: '取消',
                        onOk() {
                            vehicleUnbind(record.id).then(res => {
                                _this.$exMod.ajaxMessage(res);
                                res.plateNo === 0 ? _this.getTableList() : null;

                            })
                        }
                    });

                } else {
                    this.$message.warning(record.plateNo + '没有绑定的会员信息 无需进行解绑操作');
                }


            },

            //2.0打开编辑器
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;
            },

            //2.1 关闭编辑器
            closeEdit(e) {
                this.editShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },
            searchRest() {
                this.searchForm = {}
                this.getTableList()
            },


            rangeDateOnChange(date, dateString) {
                this.searchForm.beginDate = dateString[0];
                this.searchForm.endDate = dateString[1];
            },

            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                vehicleList(this.pagination, searchData).then(res => {

                    if (res.code === 0) {
                        if (res.data.result) {
                            this.dataSource = res.data.result; //表格数据
                        } else {
                            this.dataSource = [];
                        }


                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
                this.loading = false;
            },


            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },


            //数据初始化
            async init() {
                await VehicleTypeDict().then(res => this.VehicleTypeOPT = res);
                this.getTableList();
            }
        },
        created() {
            this.init();
        }
    };
</script>
<style lang="scss" scoped>

    .cover {

        height: 200px;
        overflow: hidden;
        background-color: #F8F8F8;
    }

    .mainBox {
        padding: 10px;
        background: #EEEEEE;
    }

    .vehicleBox {
        margin-bottom: 18px;

        .plateNo {

            padding: 4px;
            font-weight: bold;
            font-size: 15px;
            color: #000000;


        }
        .type {

            font-size: 12px;
            font-weight: normal;
            color: #333333;
        }
        .schedule {
            font-size: 20px;
            padding: 0 4px;
        }


        .hmd {
            color: #f44336;
            font-size: 20px;
            padding: 0 4px;
        }

        .isFree {
            color: #00a06b;
            font-size: 20px;
            padding: 0 4px;
        }

    }

    .noVipInfo {
        height: 60px;
        line-height: 50px;
        text-align: center;
        color: #999999;
        clear: both;

    }

    .platformTag {
        padding-left: 8px;
        font-size: 18px;
    }


</style>